<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>Document</title>
</head>
<body>
	<div id="app">
		
		{{msg}}
		
		<!-- <a v-bind:href="next">{{login}}</a> -->
		<a :href="url">{{login}}</a>
		<hr>
		<!-- if -->
		<a href="#" v-if="isLogin">{{msg}}</a>


		<hr>
		<!-- if else -->
		<a href="#" v-if="is_login">第一个</a>
		<a href="#" v-else="is_login">第二个</a>

		<!-- if v-else-if v-else -->
		<span v-if='level === 1'>青铜</span>
		<span v-else-if='level === 2'>白银</span>
		<span v-else-if='level === 3'>黄金</span>
		<span v-else>白金</span>

		<!-- for -->
		<ul>
			<li v-for='(cont,index) in conts' >{{index+1}}{{cont}}</li>
		</ul>

	</div>
</body>
<script text="javascript">
	var app = new Vue({
		el:"#app",
		data:{
			msg:'hello vue',
			url:'http://www.baidu.com',
			isLogin:true,
			login:'baidu',
			is_login:false,
			level:3,
			conts: ['pangji','panghu','pang']
		}
	})
</script>
</html>